import React, { Component } from 'react';
import './SingerTop.css';

class SingerTop extends Component {
  constructor(props) {
    super(props)
    console.log(props);
    this.state = {
      id:props.name,
      artist:[],
      img:'',
    }
  }

  componentDidMount() {
    this.$axios({
      url: 'artists',
      params: {
        id: this.state.id
      }
    }).then(data => {
      console.log(data.artist);

      this.setState(state => {
        return {
          artist: data.artist,
          img:data.artist.picUrl
        }
      })
    })
  }

  backClick(){
    window.history.back(-1)
}

  render() {
    return (
      <div>
        <div className="singer_top" > 
          <i className="iconfont icon-zuojiantou" onClick={this.backClick.bind(this)}> 《 </i>
          <span>{this.state.artist.name}</span>
        </div>

        <div className="middle_div">
          <img mode="widthFix" src={this.state.artist.picUrl} alt="" />
        </div>

      </div>
      
    );
  }
}

export default SingerTop;